<template>
	<view>
		<view class="head">
			<view class="headTop">
				<view class=""></view>
				<view class="text">个人中心</view>
				<view class="box-three">
					<image src="../../../static/shopImage/xinx.png" mode=""></image>
					<view class="xin">7</view>
				</view>
			</view>
			<view class="im">
				<view class="ima"><image src="../../../static/images/201916541220.jpg" mode=""></image></view>
				<view class="box">亦媛</view>
			</view>
			<view class="bgc"></view>
		</view>
		<view class="indent">
			<view class="indetLeft">
				<image src="../../../static/shopImage/bigdan.png" mode=""></image>
				<view class="left">
					我的订单
				</view>
			</view>
			<view class="indetLeft">
				<image src="../../../static/shopImage/bigzhang.png" mode=""></image>
				<view class="left">
					对账本
				</view>
			</view>
		</view>
		<view class="information">
			<view class="informationOne">
				<view class="box">
					<image src="../../../static/shopImage/a1.png" mode=""></image>
				</view>
				<view class="boxTwo">
					个人资料
				</view>
				<view class="boxThree">
					<image src="../../../static/images/arrow_right.png" mode=""></image>
				</view>
			</view>
			<view class="informationOne">
				<view class="box">
					<image src="../../../static/shopImage/a2.png" mode=""></image>
				</view>
				<view class="boxTwo">
					商品收藏夹
				</view>
				<view class="boxThree">
					<image src="../../../static/images/arrow_right.png" mode=""></image>
				</view>
			</view>
			<view class="informationOne">
				<view class="box">
					<image src="../../../static/shopImage/a3.png" mode=""></image>
				</view>
				<view class="boxTwo">
					店铺简介
				</view>
				<view class="boxThree">
					<image src="../../../static/images/arrow_right.png" mode=""></image>
				</view>
			</view>
			<view class="informationOne">
				<view class="box">
					<image src="../../../static/shopImage/a4.png" mode=""></image>
				</view>
				<view class="boxTwo">
					联系店铺
				</view>
				<view class="boxThree">
					<image src="../../../static/images/arrow_right.png" mode=""></image>
				</view>
			</view>
			<view class="informationOne">
				<view class="box">
					<image src="../../../static/shopImage/a5.png" mode=""></image>
				</view>
				<view class="boxTwo">
				关于
				</view>
				<view class="boxThree">
					<image src="../../../static/images/arrow_right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="tarbar">
			<view class="one">
				<image src="../../../static/shopImage/bbbb.png" mode=""></image>
				<view class="txt">店铺</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/2.png" mode=""></image>
				<view class="txt">商品</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/car.png" mode=""></image>
				<view class="txt">购物车</view>
				<view class="dian" v-show="dian">1</view>
			</view>
			<view class="one">
				<image src="../../../static/shopImage/1454.png" mode=""></image>
				<view class="text">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dian: true,
		};
	}
};
</script>

<style lang="scss">
	page {
		background-color: #f7f4f8;
	}
.head {
	position: relative;
	box-sizing: border-box;
	height: 488rpx;
	background: url(../../../static/shopImage/bgc.png) no-repeat center;
	background-size: cover;
	padding-top: 67rpx;
	.headTop {
		display: flex;
		justify-content: space-between;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		.text {
			position: relative;
			left: 40rpx;
		}
	}

	.box-three {
		margin-right: 45rpx;
		position: relative;
		image {
			width: 44rpx;
			height: 44rpx;
		}

		.xin {
			width: 29rpx;
			height: 29rpx;
			position: absolute;
			top: -15rpx;
			left: 30rpx;
			background: #fd9721ff;
			border-radius: 50%;
			font-size: 16rpx;
			line-height: 29rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}
	.bgc {
		width: 100%;
		height: 230rpx;
		position: absolute;
		bottom: 0;
		background: url(../../../static/shopImage/bgcc.png) no-repeat center;
		background-size: cover;
	}
	.im {
		width: 160rpx;
		height: 160rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -25%);
		.box {
			margin-top: 180rpx;
			margin-left: 40rpx;
			color: #ffffff;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
		}
	}
	.ima {
		width: 160rpx;
		height: 160rpx;
		overflow: hidden;
		border-radius: 9999rpx;
		position: absolute;
		color: #ffffff;

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}
}
.indent{
	padding: 0 30rpx;
	margin: 22rpx 0;
	display: flex;
	justify-content: space-between;
	.indetLeft{
		background-color: #FFFFFF;
		width: 333rpx;
		height: 182rpx;
		padding-top: 30rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
			
		.left{
			margin-top: 24rpx;
			text-align: center;
		}
		image{
			width: 70rpx;
			height: 73rpx;
			margin-left: 128rpx;
		}
	}
}
.information{
	margin-top: 20rpx;
	padding: 0 30rpx;
	.informationOne{
		height: 104rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		position: relative;
		.box{
			image{
				width: 60rpx;
				height: 60rpx;
				margin-top: 22rpx;
				margin-left: 31rpx;
				
			}
		}
		.boxTwo{
			font-size:30rpx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			line-height: 104rpx;
			margin-left: 22rpx;
		}
		.boxThree{
			image{
				width: 18rpx;
				height: 33rpx;
				position: absolute;
				right: 35rpx;
				top:35rpx;
			}
		}
	}
}

.tarbar {
	height: 98rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
	.one {
		position: relative;
		image {
			height: 44rpx;
			width: 44rpx;
			margin-top: 11rpx;
		}
		.dian {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			font-size: 22rpx;
			position: absolute;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
			top: 0;
			left: 24rpx;
			background-color: #f93c45;
		}
	}
	.text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(247, 110, 117, 1);
	}
	.txt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
</style>
